<template>
  <view class="goods-item" @click="handleDetail">
    <u-image
      show-loading
      :show-menu-by-longpress="false"
      :src="row.image"
      width="312rpx"
      height="252rpx"
    />
    <view style="margin-top: 10rpx; height: 90rpx">
      <u-text :text="row.title" color="#222222" size="28rpx" lines="2" />
    </view>
    <view class="f-l">
      <view class="tag-item" v-for="(i, k) in labels" :key="k">{{ i }}</view>
    </view>
    <view class="f-b">
      <u-text :text="row.price" mode="price" color="#3BA199" size="28rpx" bold />
      <u-text :text="`销量：${row.sales}`" color="#BABABA" size="24rpx" align="right" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 数据
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    labels() {
      let list = [];
      if (this.row.shop.isself == "1") list.push("官方放心购");
      if (this.row.isLive) list.push("LIVE");
      if (this.row.shop.state == 0) list.push("个人");
      if (this.row.shop.state == 1) list.push("企业");
      if (this.row.shop.state == 2) list.push("旗舰");
      return list;
    },
  },
  methods: {
    // 跳转详情
    handleDetail() {
      uni.navigateTo({ url: `/pages/mall/goodsDetail?id=${this.row.id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-item {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  .f-l {
    margin-top: 22rpx;
    margin-bottom: 50rpx;
    display: flex;
    flex-wrap: wrap;
    .tag-item {
      display: inline-block;
      border-radius: 40rpx;
      height: 32rpx;
      min-width: 64rpx;
      line-height: 32rpx;
      font-size: 20rpx;
      color: #fa6821;
      text-align: center;
      padding: 0 10rpx;
      border: 1rpx solid #fa6821;
      margin-right: 10rpx;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .f-b {
    position: absolute;
    left: 20rpx;
    right: 20rpx;
    bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
  }
}
</style>
